<template>
  <div ref="punishPage" class="notice-div">
    <span class="news-text">联合奖惩</span>
    <a-divider/>
    <div class="notice-list-div" >
      <a-list item-layout="vertical" :loading="loading" size="large" :pagination="listData.length>0?pagination:false" :data-source="listData">
        <a-list-item slot="renderItem"  key="item.title" slot-scope="item, index" @click="onDetail(item)">
          <div class="notice-list-text">
            <div class="notice-list-text-one" style="width: 8%;">{{((pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1))>9?(pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1) :'0' + (index + 1) }}</div>
            <div class="notice-list-text-two notice-list-text-one" :title="item.contentTitle">{{item.contentTitle}}</div>
            <div class="notice-list-text-three">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</div>
          </div>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import emv from "@/views/center/emptyVue.vue";
import newsNoticeApi from '@/api/newsNotice'
export default {
  name: "notice",
  props: {
    page: {
      type: String,
      default: '1'
    },
  },
  data(){
    return{
      clientHeight:'',
      screenHeight:'',
      loading:false,
      listData:[],
      pageFilter: {
        contentCategoryId:"159",
        pageNo:1,
        pageSize:10 ,
      },
      pagination: {
        // showTotal: total => `共 ${Number((this.listData.length/10+1)).toFixed(0)} 页`,
      },
    }

  },
  mounted(){
    this.setFootStyle()

  },
  created(){
    this.loading = true;
    this.get_notice_list();
  },
  methods: {
    itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <a><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>上一页</a>;
      } else if (type === 'next') {
        return <a>下一页<i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a>;
      }
      return originalElement;
    },
    getScreenHeight(){
      // 获取浏览器可视区域高度
      this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}`
      window.onresize = function temp() {
        this.screenHeight = document.body.clientHeight;
      };
    },
    onDetail(item){
      this.$router.push({
        name:"newsDetail",
        query:{
          type:'detail',
          id:item.id,
          breadcrumbName:'表彰与惩罚',
          routerLikeTo:'/center/commendPunishPage/punishPage'
        }
      });
    },
    async get_notice_list() {
      await newsNoticeApi.get_notice_news_list(this.pageFilter).then(res => {
        this.listData = res.rows;
        this.loading = false;
        this.pagination = {
          onChange: (page,pageSize) => {
            this.pageFilter= {
              contentCategoryId:"159",
              pageNo:page,
              pageSize:pageSize ,
            };
            this.onListChange(this.pageFilter);
          },
          pageSize: this.pageFilter.pageSize,
          total:res.total,
          showQuickJumper: true,
          itemRender:this.itemRender,
        };

      })
          .catch(err => {
            this.loading = false;
          });
      this.setFootStyle()
    },
    onListChange(pageFilter) {
      this.loading = true;
      this.pageFilter = pageFilter;
      this.get_notice_list();
    },
    setFootStyle(){
      this.$nextTick(()=>{ // 页面渲染完成后的回调
        this.getScreenHeight();
        this.clientHeight = this.$refs.punishPage.offsetHeight+364;
        // console.log(this.screenHeight,this.clientHeight);
        if(this.screenHeight>this.clientHeight){
          if(this.screenHeight-this.clientHeight>40){
            emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
          }else{
            emv.$emit("setfootmargintop",40);
          }
        }else{
          emv.$emit("setfootmargintop",40);
        }
        // if(this.screenHeight>this.clientHeight){
        //   if(this.screenHeight-this.clientHeight-364<40){
        //      emv.$emit("setfootmargintop",40);
        //   }else{
        //     emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight-364);
        //   }
        // }else{
        //   emv.$emit("setfootmargintop",40);
        // }
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    // 设置下一个路由的 meta]
    next(vm=>{
      if(to.name=='punishPage'){
        emv.$emit("setMenuKey",'2');
      }
    })
  },
};
</script>
<style lang="less">
.notice-div{
  .ant-divider-horizontal {
    display: block;
    clear: both;
    width: 100%;
    min-width: 100%;
    height: 1px;
    /* margin: 20px 0; */
    margin-top: 20px;
    margin-left: -2px;
    margin-bottom: -15px;
  }
  .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px;
    margin-top: 5px;
  }
}
.notice-list-div{
  // margin-left: -10px;
  margin-top: 12px;
  .ant-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    width: 100%;
  }
  .ant-list-split .ant-list-item {
    border-bottom: 1px dotted #ccc;
    // padding-bottom: 35px;
    padding-top: 30px;
    height: 78px;
  }
  .ant-pagination-options-quick-jumper {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    vertical-align: top;
    color: #808080;
  }
  .ant-pagination-prev, .ant-pagination-next, .ant-pagination-jump-prev, .ant-pagination-jump-next {
    display: inline-block;
    min-width: 32px;
    height: 32px;
    color: rgba(0, 0, 0, 0.65);
    font-family: Arial;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .ant-pagination-total-text {
    display: inline-block;
    height: 32px;
    margin-right: 8px;
    line-height: 30px;
    vertical-align: middle;
    color: #808080;
  }
  .notice-list-text{
    color: #343434;
    //   display: flex;
    .notice-list-text-one{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 21px;
      float: left;
    }
    .notice-list-text-two{
      // margin-left: 44px;
      width: 75%;
      color: #343434;
      text-overflow: ellipsis;  /*超出内容用省略号*/
      overflow: hidden; /*内容超出后隐藏*/
      white-space: nowrap; /*文本不进行换行*/
      float: left;
      font-size: 14px;
    }
    .notice-list-text-three{
      width: 17%;
      text-align: right;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 21px;
      float: left;
    }

  }

  .notice-list-text:hover{
    cursor: pointer;
    .notice-list-text-two{
      color: #005AB5;
      font-weight: 600;
    }
  }
}


</style>
